<template>
  <div>
    <div class="new-box">
      <el-button type="primary" @click="showDialog">添加院校</el-button>
      <el-table :data="schoolList" style="width:100%;margin-top:20px"
      :row-class-name="tableRowClassName"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="院校" prop="schname"></el-table-column>
        <el-table-column label="编码">
          <template slot-scope="scope">
            <el-tag effect="dark" type="success">{{scope.row.schid}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="这个操作很危险哦,真的要删除"
              @onConfirm="deleteItem(scope.row._id)"
            >
              <el-button slot="reference" type="danger" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="添加院校" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :rules="rules" :model="form" ref="schoolref">
        <el-form-item label="院校名称" prop="schname">
          <el-input v-model="form.schname" />
        </el-form-item>
        <el-form-item label="院校编码" prop="schid">
          <el-input v-model="form.schid" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">暂不添加</el-button>
        <el-button type="primary" @click="addschool">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      schoolList: [],
      dialogVisible: false,
      rules: {
        schid: [{ required: true, message: "请输入院校编码", trigger: "blur" }],
        schname: [
          { required: true, message: "请输入院校名称", trigger: "blur" }
        ]
      },
      form: {}
    };
  },
  methods: {
     tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
            return 'warning-row';
            } else   {
            return 'success-row';
            }
            return '';
        },

    deleteItem(_id) {
      console.log(_id);
      this.$axios
        .post("/vue/delschool", {
          _id
        })
        .then(res => {
          if (res.data.type) {
            this.schoolList = this.schoolxList.filter(item => item._id !== _id);
          }
        });
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    addschool() {
      this.$refs.schoolref.validate(valid => {
        if (valid) {
          // this.dialogVisible=false;
          this.$axios.post("/vue/addschool", this.form).then(res => {
            if (res.data.type) {
              this.dialogVisible = false;
              this.schoolList = [this.form, ...this.schoolList];
            }
          });
        } else {
          this.$message.error("请务必先填写信息");
        }
      });
    }
  },
  mounted() {
    this.$axios.post("/vue/getschool").then(res => {
      this.schoolList = res.data.result;
    });
  }
};
</script>